<template>
	<div class="search-page">
		<van-search
			v-model="searchQuery"
			placeholder="请输入单词"
			show-action
			@update:model-value="updateSearch"
			@cancel="goBack"
		/>
		<van-list>
			<div
				v-for="result in searchResults"
				:key="result.id"
				class="search-result"
			>
				<div class="word">单词：{{ result.name }}</div>
				<div class="meaning">翻译：{{ result.description }}</div>

				<div class="button">
					<van-button
						type="primary"
						size="small"
						@click="addWordFn(result)"
						>添加单词本</van-button
					>
				</div>
			</div>
		</van-list>
		<van-empty
			description="暂无搜索数据"
			v-if="searchResults.length === 0"
		/>

		<!-- 新增单词本的弹出层 -->
		<van-popup v-model:show="showAddDialog" round position="bottom">
			<van-picker
				:columns="columns"
				@cancel="showAddDialog = false"
				@confirm="addWords"
			/>
		</van-popup>
	</div>
</template>

<script setup>
import { getWord } from "../api/word";
import { getUserWordSet, updateWord } from "../api/words";
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
const router = useRouter();
const columns = ref([]);
const WordSetList = ref([]);
const showAddDialog = ref(false);
const word = ref(null);
const searchQuery = ref("");
const searchResults = ref([]);
const user = ref(null);
const goBack = () => {
	router.back();
};
onMounted(() => {
	user.value = JSON.parse(localStorage.getItem("user"));
	getUserWord();
});
// 获取用户单词本
const getUserWord = async () => {
	const res = await getUserWordSet({ user_id: user.value.id, limit: 15 });
	console.log(res);
	if (res.success) {
		WordSetList.value = res.data;
		res.data.forEach(item => {
			columns.value.push({
				value: item.id,
				text: item.name,
			});
		});
	}
};

const same = list => {
	if (!list) return "";
	return JSON.parse(list)
		.map(i => i.name)
		.join(",");
};
// 搜索

const debounce = (func, delay) => {
	let timerId;

	return function (...args) {
		clearTimeout(timerId);

		timerId = setTimeout(() => {
			func.apply(this, args);
		}, delay);
	};
};

const updateSearch = debounce(async value => {
	// searchQuery.value = value;
	const res = await getWord({ name: value });
	console.log(res);
	if (res.success) {
		searchResults.value = res.data;
		// 处理成功时的逻辑
	}
}, 500);

// 获取单词
const addWordFn = data => {
	showAddDialog.value = true;
	word.value = data;
};

const addWords = async selectedValues => {
	showAddDialog.value = false;
	let indexes = selectedValues.selectedIndexes[0];
	const words = WordSetList.value[indexes];
	console.log(WordSetList.value[indexes]);
	let wordlist = WordSetList.value[indexes].wordlist || [];
	wordlist.push(word.value);
	const res = await updateWord({
		id: words.id,
		name: words.name,
		img: words.img,
		wordlist,
		user_id: words.user_id,
	});
	console.log(res);
	showNotify({
		type: res.success ? "success" : "danger",
		message: res.message,
	});
	if (res.success) {
	}
	console.log(wordlist);
};
</script>

<style scoped>
.search-page {
	padding: 16px;
}

.search-result {
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}

.word {
	font-weight: bold;
}
</style>
